<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery操作DOM</title>
		<style>
			.class01{
				width: 100px;
				height: 200px;
				background-color: aqua;
			}
			
			.class02{
				width: 200px;
				height: 200px;
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<p class="class02">Css的效果</p>
		<button id="btn01">p的宽度</button>
		<button id="btn02">p字体大小</button>
		<button id="btn03">p多个样式</button>
		<div id="d01">这是一个div</div>
		<button id="addClassBtn">添加样式</button>
		<button id="removeClassBtn">移除样式</button>
		<script src="./js/jQuery/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				$("#btn01").click(function(){
					var width=$(".class02").css("width");
					console.log(width);
				});
				
				$("#btn02").click(function(){
					 $(".class02").css("fontSize","4em");
					 
				});
				
				$("#btn03").click(function(){
					 $(".class02").css({"fontSize":"2em","color":"white"});
				});
				
				//对id=addClassBtn绑定一个单击事件
				$("#addClassBtn").click(function(){
					var div=$("#d01");
					div.addClass("class01");
				});
				//对id=removeClassBtn绑定一个单击事件
				$("#removeClassBtn").click(function(){
					var div=$("#d01");
					div.removeClass("class01");
				});
				
			}); 
		</script>
	</body>
</html>
